<template>
  <div class="app-container">
    <el-container>
      <el-main>
        <div class="filter-container">
          <el-select
            v-model="listQuery.clientId"
            size="small"
            placeholder="选择client"
            style="width: 40%"
            @change="handleFilter">
            <el-option
              v-for="item in clients"
              :key="item.value"
              :label="item.clientName"
              :value="item.clientId"/>
          </el-select>
        </div>

        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="id" prop="id" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="url" prop="url" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.url }}</span>
            </template>
          </el-table-column>
          <el-table-column label="服务id" prop="url" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.clientId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="白名单" prop="allowClients" align="center">
            <template slot-scope="scope">
              <span><el-select
                v-model="scope.row.allowClients"
                size="small"
                multiple
                placeholder="选择client"
                collapse-tags
                @change="saveClients(scope.row)"
              >
                <el-option
                  v-for="item in clients"
                  :key="item.value"
                  :label="item.clientName"
                  :value="item.clientId"
                />
              </el-select></span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" fixed="right" >
            <template slot-scope="{row}">
              <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.current"
          :limit.sync="listQuery.size"
          @pagination="load"/>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import { permissionService } from '@/api/upms/permission'
import Pagination from '@/components/Pagination'
import { clientService } from '@/api/upms/client'
export default {
  name: 'Index',
  components: { Pagination },
  data: function() {
    return {
      clients: [],
      list: [],
      total: 0,
      listLoading: true,
      listQuery: { current: 1, size: 10, clientId: '' }
    }
  },
  created() {
    this.load()
    clientService.list().then(res => {
      this.clients = res.data
    })
  },
  methods: {
    load: function() {
      this.listLoading = true
      permissionService.listPage(this.listQuery).then(res => {
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleFilter: function() {
      this.listQuery.page = 1
      this.load()
    },
    handleDelete(row) {
      debugger
      var params = { id: row.id }
      permissionService.delete(params).then((res) => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        const index = this.list.indexOf(row)
        this.list.splice(index, 1)
      })
    },
    saveClients: function(row) {
      var param = {}
      param.id = row.id
      param.clients = row.allowClients.join(',')
      permissionService.saveClients(param).then(res => {

      })
    }
  }
}
</script>

<style scoped>

  .filter-container {
    padding-bottom: 10px;
  }

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
</style>
